<div class="row">
    <div class="col-lg-12">
        <h2>Binding Properties Between AngularJS and Esri</h2>
        <p>
            Developers can bind properties between Esri JSAPI 4.x and Angular 1.x by making use of
            <a href="https://developers.arcgis.com/javascript/latest/guide/working-with-props/index.html#Watching_properties_55">watching JSAPI properties</a>
            as well as Angular's <code>$scope.$applyAsync()</code> or <code>$scope.$apply()</code>.
        </p>
        <p>
            But, as an example, if a user input element only needs to make changes to Esri JSAPI properties, then you can use <code>ng-model</code> to achieve simple "1-direction" binding from Angular to JSAPI.
        </p>
        <p>
            The table below can be used as a guide to help you decide which methods to use when binding properties between the two frameworks.
        </p>

        <p>
            See the <a href="#/examples/property-binding">Property Binding example</a> for a demonstration of these concepts.
        </p>


        <div class="row">
            <div class="col-sm-9">
                <table class="table table-condensed table-striped">
                    <thead>
                        <tr>
                            <th>Direction</th>
                            <th>JSAPI <div><code>watch()</code></div></th>
                            <th>Angular <div><code>$scope.$applyAsync()</code></div></th>
                            <th>Angular <div><code>ng-model</code></div></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>JSAPI to Angular</td>
                            <td><span class="glyphicon glyphicon-ok"></span></td>
                            <td><span class="glyphicon glyphicon-ok"></td>
                            <td><span class="glyphicon glyphicon-minus"></span></td>
                        </tr>
                        <tr>
                            <td>Angular to JSAPI</td>
                            <td><span class="glyphicon glyphicon-minus"></span></td>
                            <td><span class="glyphicon glyphicon-minus"></span></td>
                            <td><span class="glyphicon glyphicon-ok"></td>
                        </tr>
                        <tr>
                            <td>Both</td>
                            <td><span class="glyphicon glyphicon-ok"></td>
                            <td><span class="glyphicon glyphicon-ok"></td>
                            <td><span class="glyphicon glyphicon-ok"></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

    </div>
</div>
